<html>

    <head>
        <title>Ball Game</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="./css/style.css">
    </head>

    <body>



        <div id="score">
            积分: 0
        </div>


        <div id="cheatBox">
            <div id="chatTextDiv">
            </div>
            <input type="text" id="chatTextInput">
        </div>

        <div class="overlay-wrapper" id="overlay">
            <div class="main-box">
                <h2 class="main-header">球球<b style="color: red;">小</b>作战</h2>
                <div class="name-play">
                    <div>
                        <input id="name" class="input name-input" type="text" placeholder="请输入本局昵称">
                    </div>
                    <div>
                        <button id="play" class="button play-button">开始游戏</button>
                    </div>
                </div>

                <div class="info">
                    <b>移动鼠标</b>控制你的球球<br>
                    滑动<b>鼠标轮滑</b>放大缩小<br>
                    按下<b>W</b>键吐球<br>
                    按下<b>E</b>键分身<br>
                    按下<b>R</b>键重置<br>
                </div>

                <div class="settings">
                    <h3 class="heading">设置</h3>

                    <label>
                        <input id="showName" name="showMass" type="checkbox">
                        显示名字
                    </label>
                    <label>
                        <input id="darkTheme" name="darkTheme" type="checkbox">
                        护眼模式                        
                    </label>
                </div>

                <div class="version">
                    球球小作战v1.0 by JQX
                </div>
            </div>

        </div>
        <canvas id="canvas"></canvas>

        <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
        <script src="./js/script.js"></script>
    </body>

</html>